import { StyleSheet, Text, View, Image } from 'react-native'
import React, { useEffect, createRef } from 'react'
import axios from '../axios'
import { connect } from 'react-redux'
import Cell from '../components/Cell'
import { getDomain } from '../utils/tools'
import Actionsheet from '../components/Upload/Actionsheet'
import { loginAction } from '../redux/actionCreator/user'

const UserInfo = ({ user, loginAction }) => {
  const ref = createRef(null)
  useEffect(() => {
    
  }, [])
  const open = () => {
    ref.current.open()
  }
  const editAvatar = (data) => {
    axios.put('/avatar', {
      avatar: data.url
    }).then(res => {
      loginAction({
        ...user,
        avatar: res.data.avatar
      })
    }).catch(err => {})
  }
  return (
    <View>
      <Cell leftText='头像' borderBottom={true} onPress={open}>
        <Image style={styles.avatar} source={{ uri: getDomain(user.avatar) }}></Image>
      </Cell>
      <Cell leftText='昵称' rightText={user.nickname} borderBottom={true}
        link={{name: 'CommonForm', params: {title: '编辑昵称'}}}
      ></Cell>
      <Cell leftText='用户名' rightText={user.username} borderBottom={true}></Cell>
      <Actionsheet ref={ref} onSuccess={editAvatar}></Actionsheet>
    </View>
  )
}

export default connect((state) => {
  return {
    user: state.userReducer
  }
}, {
  loginAction
})(UserInfo)

const styles = StyleSheet.create({
  avatar: {
    width: 30,
    height: 30,
  }
})